<!--
 * @Author: yfp
 * @Date: 2024-03-30 20:00:53
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-07-24 11:18:41
 * @Description: 
-->
<template>
  <div class="box-content">
    <div class="header-box">
      <!-- <div class="file-name">本次分析：【{{ fileName || "——" }}】</div> -->
      <div class="show_tip">
        <!-- <div class="file-name">本次分析：【{{ fileName || "——" }}】</div> -->
        <!-- <div>
          <span class="num">【{{
            fileName ? fileName : "——"
          }}】</span>
          <span class="title">本次分析</span>
        </div> -->
        <div>
          <span class="num">{{
            dataStatic.signal_number ? dataStatic.signal_number : 0
          }}</span>
          <span class="title">原始告警信号总数</span>
        </div>
        <div>
          <span class="num">{{
            dataStatic.change_number ? dataStatic.change_number : 0
          }}</span>
          <span class="title">定值修改信号数量</span>
        </div>
        <div>
          <span class="num">{{ isNaN(dataStatic.ratio) ? 0 : dataStatic.ratio }}%</span>
          <span class="title">定值修改信号占比</span>
        </div>
        <div>
          <span class="num">{{
            dataStatic.number_of_event ? dataStatic.number_of_event : 0
          }}</span>
          <span class="title">定值修改事件总数</span>
        </div>
      </div>
    </div>
    <el-row class="alarm-box" justify="space-between" :gutter="20">
      <el-col :span="24" class="alarm-l">
        <el-form :model="form" ref="alarmForm" :inline="true" @submit.prevent>
          <el-form-item label="事件名称：" prop="shijian1" class="bigSelect">
            <el-input v-model="form.shijian1" @keyup.enter="onSubmit(form)" />
          </el-form-item>
          <el-form-item label="所属厂站：" prop="station" class="bigSelect">
            <el-input v-model="form.station" @keyup.enter="onSubmit(form)" />
          </el-form-item>
          <el-form-item label="装置：" prop="zhuangzhi" class="bigSelect">
            <el-input v-model="form.zhuangzhi" @keyup.enter="onSubmit(form)" />
          </el-form-item>
          <el-form-item label="主站接收时间：" prop="receive_time">
            <el-date-picker v-model="form.receive_time" type="daterange" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" />
          </el-form-item>
          <el-form-item label="是否定值修改告警：" prop="prediction" class="bigSelect">
            <el-select v-model="form.prediction" style="width: 150px" placeholder="请选择" @change="onSubmit(form)">
              <el-option label="全部" value="all" />
              <el-option label="是" value="1" />
              <el-option label="否" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit(form)">查询</el-button>
            <el-button @click="resetForm(form)">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- height: calc(100vh - 500px); -->
        <el-table :data="pageData" :header-cell-style="tableColor" style="width: 100%" v-loading="loading" size="small"
          :height="tableH" element-loading-text="Loading...">
          <el-table-column type="index" width="60" label="序号" align="center">
            <template #default="scope">
              {{ (scope.$index + 1) + (currentPage - 1) * pageSize }}
            </template>
          </el-table-column>
          <el-table-column prop="主站接收时间" label="主站接收时间" align="center" />
          <!-- <el-table-column prop="装置时间" label="装置时间" align="center" /> -->
          <el-table-column prop="所属厂站" :show-overflow-tooltip="true" label="所属厂站" align="center" />
          <el-table-column prop="装置" :show-overflow-tooltip="true" label="装置" align="center" />
          <el-table-column prop="遥信点" label="遥信点" align="center" />
          <el-table-column prop="值" label="值" align="center" />
          <el-table-column prop="定值修改操作" label="操作事件" align="center" />
          <el-table-column prop="prediction" label="是否定值修改警告" width="140" align="center">
            <template #default="scope">
              <span v-show="scope.row.prediction === 1" class="isYes">是</span>
              <span v-show="scope.row.prediction === 0" class="isNo">否</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper" :total="alarmTotal" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </el-col>
    </el-row>
    <el-row justify="space-between" :gutter="20" class="alarm-b">
      <el-col :span="24">
        <el-table :data="dataGrp" :header-cell-style="tableColor" style="width: 100%" :height="tableH1" size="small">
          <el-table-column type="index" width="60" label="序号" align="center" />
          <!-- <el-table-column prop="belonging_station" label="厂站名称" align="center" />
          <el-table-column prop="device" label="装置名称" align="center" /> -->
          <el-table-column prop="set_value_modification" label="事件名称" align="center" />
          <el-table-column prop="begin_time" label="开始时间" align="center" />
          <el-table-column prop="end_time" label="结束时间" align="center" />
          <el-table-column prop="number" label="告警总数" align="center" />
          <el-table-column label="结果详情" width="100" align="center">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, watch, onUpdated, onActivated, onBeforeMount } from "vue";
import { ElMessage, ElLoading } from "element-plus";
import FormInstance from 'element-plus'
import alarmDetail from "@/api/alarmDetail";

const props = defineProps({
  fileName: {
    type: String,
    default() {
      return "";
    },
  },
  fileNameId: {
    type: String,
    default() {
      return "";
    },
  },
  pageTime: {
    type: String,
    default() {
      return "";
    },
  }
});

const tableData = ref([]);
const dataGrp = ref([]);
let pageData = ref([]);
const tableColor = {
  backgroundColor: '#F2F3F5',
  borderColor: '#F2F3F5',
}
watch(
  [() => props.fileNameId, () => props.pageTime],
  () => {
    // 文件信息变化 重新获取
    tableData.value = []
    pageData.value = []
    dataGrp.value = []
    nextTick(() => {
      console.log("重新获取", props.fileNameId);
      if (props.fileNameId) {
        onLoad(props.fileNameId);
      }
    });
  },

  { immediate: true }
);
const dataStatic = ref({
  change_number: 0, // 定值修改信号数量
  number_of_event: "", // 定值修改事件总数
  ratio: 0, // 定值修改信号占比
  signal_number: 0, // 原始告警信号总数
}); // data_static
// const staNum = reactive({
//   num: 1
// });
let tableH = ref(0);
let tableH1 = ref(0)
const loading = ref(false);
// !props.fileName ? [] :

const currentPage = ref(1);
const pageSize = ref(20);
let alarmTotal = ref(1);
onMounted(async () => {
  console.log("警告详情");
  nextTick(() => {
    tableH.value = (window.innerHeight - 100) / 2 - 80;
    tableH1.value = (window.innerHeight - 100) / 2 - 180;
  });
});


const form = reactive({
  receive_time: "",
  start_time: "",
  end_time: "",
  zhuangzhi: "",
  shijian1: "",
  shijian: "",
  predict: "",
  prediction: "all",
  station: '',
  out_file: props.fileNameId
});

/** 加载数据 */
const onLoad = (param) => {
  let sendObj = {};
  if (typeof param === "string") {
    sendObj = {
      out_file: param,

      receive_time: "",
      start_time: "",
      end_time: "",
      zhuangzhi: "",
      shijian1: "",
      shijian: "",
      predict: "",
      prediction: "all",
      station: '',

    };
  } else {
    sendObj = param
    if (!sendObj.receive_time) {
      sendObj.end_time = null
      sendObj.start_time = null
    }
  }
  sendObj.page_number = currentPage.value
  sendObj.page_size = pageSize.value

  showLoading('加载数据中...')
  alarmDetail
    .getHisRecordList(sendObj)
    .then((res) => {
      loadingInstance.close()
      console.log(res);
      // 1:正常；0:异常；
      if (res && res.data.code === 1) {
        tableData.value = res.data.data_info || [];
        // pageData.value = getPagedData();
        pageData.value = res.data.data_info || [];
        dataStatic.value = res.data.data_static || {};
        dataStatic.value.ratio = (Number(dataStatic.value.ratio) * 100).toFixed(2)
        dataGrp.value = res.data.data_grp || [];
        // 总数
        alarmTotal.value = res.data.data_static.total_records
      }
    })
    .catch((err) => {
      loadingInstance.close()
      console.log(err);
    });
};
// 计算分页后的数据
const getPagedData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  alarmTotal.value = tableData.value.length;
  return tableData.value.slice(start, end);
};
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
  currentPage.value = 1;
  pageSize.value = val;
  // pageData.value = getPagedData();
  form.out_file = props.fileNameId
  onLoad(form)
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  form.out_file = props.fileNameId
  onLoad(form)
  // pageData.value = getPagedData();
};
const alarmForm = ref();
const onSubmit = (formEl) => {
  if (!formEl) return;
  if (formEl.receive_time) {
    formEl.start_time = new Date(formEl.receive_time[0]).getTime();
    formEl.end_time = new Date(formEl.receive_time[1]).getTime();
  }
  formEl.shijian = formEl.shijian1

  if (formEl.prediction === "all") {
    formEl.predict = "";
  } else {
    formEl.predict = formEl.prediction
  }
  formEl.out_file = props.fileNameId
  onLoad(formEl)
};
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.start_time = ''
  formEl.end_time = ''
  formEl.predict = ''
  formEl.prediction = 'all'
  formEl.receive_time = ''
  formEl.zhuangzhi = ""
  formEl.shijian = ""
  formEl.shijian1 = ""
  formEl.station = ""

  onLoad(formEl)
};

// 下方表格逻辑
const handleClick = (row) => {
  console.log('handleClick row', row)
  // 筛选上面表格数据
  form.start_time = ''
  form.end_time = ''
  form.predict = ''
  form.prediction = 'all'
  form.receive_time = ''
  form.zhuangzhi = ""
  form.station = ""
  form.shijian1 = row.set_value_modification
  form.shijian = row.set_value_modification ? row.set_value_modification.replace(/\*/gi, "") : ''
  form.out_file = props.fileNameId
  onLoad(form)
};

let loadingInstance = null
const showLoading = (textData) => {
  loadingInstance = ElLoading.service({
    text: textData,
    background: 'rgba(0, 0, 0, 0.7)'
  })
}

</script>

<style scoped>
.box-content {
  position: relative;
  overflow: auto;
  padding: 10px;
  border-radius: 10px;
  height: 100%;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}

.alarm-box {
  /* display: flex; */
  margin-bottom: 20px;
}

.header-box {
  /* display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #606266;
  font-size: 16px; */
}

.header-r {
  display: flex;
  flex: 1;
  justify-content: space-between;
}

.show_tip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #f2f3f5;
  border-radius: 5px;
  padding: 10px 30px;
  margin-bottom: 10px;

  div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .num {
      color: #409eff;
      /* color: #f56c6c; */
      font-size: 18px;
      font-size: bold;
      color: red;
    }

    .title {
      font-size: 14px;
    }
  }
}

:deep(.el-form .el-form-item) {
  margin-right: 30px;
  margin-bottom: 10px;
}

.file-name {
  flex: 1;
  font-size: 14px;
  font-weight: bold;
  color: #409eff;
}

.num {
  color: #ff0000;
  /* color: #f56c6c; */
  font-size: 18px;
  font-size: bold;
}

.page-box {
  margin: 20px 0 5px;
  display: flex;
  justify-content: flex-end;
}

.btn-box {
  margin-left: 40px;
  margin-bottom: 15px;
}


:deep(.el-form .bigSelect) {
  width: 12%;
}

:deep(.el-form .el-form-item .el-form-item__content) {
  width: 100%;
}

:deep(.el-form .el-form-item .el-form-item__content .el-select) {
  width: 100% !important;
}


.isYes {
  color: blue;
}

.isNo {
  color: red;
}
</style>
